<template>
    <div class="con">
        <h3 class="title">消息列表</h3>

        <el-form :inline="true" :model="searchForm" label-width="100px">
            <el-form-item label="通知时间">
                <el-date-picker v-model="searchForm.daterange" type="daterange" value-format="yyyy-MM-dd" unlink-panels
                    range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" @change="onDateChange">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchMessage">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" border>
            <el-table-column prop="msg_type" label="类型" align="center" />
            <el-table-column prop="msg_content" label="内容" align="center" />
            <el-table-column prop="msg_submit_time" label="提交时间" align="center" />
        </el-table>

        <el-pagination class="pagination" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize" layout="total, sizes, prev, pager, next" :total="totalItems"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script>
const caseTypeArr = ['刑事案件', '行政案件', '其它']

export default {
    data() {
        return {
            searchForm: {
                daterange: ''
            },
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            totalItems: 10
        }
    },
    mounted() {
        const data = Array.from({ length: 10 }, (v, k) => {
            return {
                msg_type: caseTypeArr[k % 3],
                msg_content: `XXX案件消息通知内容_${k}`,
                msg_submit_time: `2024-03-01`
            }
        })
        this.tableData = [...data]
        this.getList()
    },
    methods: {
        onDateChange() {
            this.currentPage = 1
            this.getList()
        },
        searchMessage() {
            this.currentPage = 1
            this.getList()
        },
        getList() {
            // Implement your API call to fetch the data based on searchKeyword, currentPage, and pageSize
            // Update tableData and totalItems accordingly
        },
        handleSizeChange(size) {
            this.pageSize = size
            this.getList()
        },
        handleCurrentChange(page) {
            this.currentPage = page
            this.getList()
        }
    }
}
</script>

<style lang="scss" scoped>
.con {
    .title {
        margin: 0px auto 30px;
        // text-align: center;
        // color: #707070;
    }
}

.pagination {
    margin: 30px 0;
}
</style>